<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的目标</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<!-- 引入 echarts.js -->
		<script src="../../js/echarts.min.js"></script>
		<link rel="stylesheet" href="../../layui/css/layui.css" media="all">
		<script src="../../js/jquery3.js"></script>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body{
			overflow-y: hidden;
		}
		.bg {
			width: 200px;
			height: 200px;
			border-radius: 100%;
			background: #ccc;

			position: relative;
			margin: 20px 15% auto;
			float: left;
		}

		.circle-right,
		.circle-left,
		.mask-right,
		.mask-left {
			width: 200px;
			height: 200px;
			border-radius: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.circle-right,
		.circle-left {
			background: skyblue;
		}

		.mask-right,
		.mask-left {
			background: #ccc;
		}

		.circle-right,
		.mask-right {
			clip: rect(0, 200px, 200px, 100px);
		}

		.circle-left,
		.mask-left {
			clip: rect(0, 100px, 200px, 0);
		}

		.text {
			width: 160px;
			height: 160px;
			line-height: 160px;
			text-align: center;
			font-size: 34px;
			color: deepskyblue;
			border-radius: 100%;
			background: #fff;
			position: absolute;
			top: 20px;
			left: 20px;
		}

		#dv1 {
			background-color: white;
			width: 96%;
			height: 300px;
			margin: 20px 20px auto;
		}

		#dv2 {
			background-color: white;
			width: 96%;
			margin: 20px 20px auto;
		}
		.add_tb {
			width: 26px;
			height: 26px;
			margin: 0 0 0 10px;
		}
		
	</style>
	<script src="../../layui/layui.js"></script>
	<body bgcolor="whitesmoke">
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="dv1">
			</br>
			&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-flag" style="width: 150px;height: 100px;"><b>目标总览</b></i>
			<br>
			<p style="margin-left: 21%;"><b>完成率</b></p>
			<div class="bg">
				<div class="circle-right"></div>
				<div class="text" id="finishPercent"></div>
			</div>
			<div id="main" style="width: 300px;height:220px; float: right;margin-right: 200px;"></div>
		</div>
		<div id="dv2">
			</br>
			&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-flag" style="width: 150px;height: 100px;"><b>我的目标</b></i>
			</br>
			</br>
			<table class="layui-hide" id="test" lay-filter="test"></table>
		</div>
		<div id="toolBar" style="display: none;">
			<div class="layui-btn-group">
				<button type="button" class="add_tb " lay-event="add"><i class="layui-icon">&#xe654;</i></button>
			</div>
		</div>

		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">完成</a>
		</script>


		<script>
			$(function() {
				$.post("/user/getSelf", {}, function (data) {
				    if (data != null) {
				layui.use('table', function() {
					var table = layui.table;

					table.render({
						elem: '#test',
						url: '/target/findNoArchived',
						method: 'post',
						page: {
							limits: [5, 10, 15, 20],
							limit: 5,
							theme: '#5FB878',
						},
						toolbar: '#toolBar', //开启头部工具栏

						where: {
							uid:data.u_id
						},
						
						defaultToolbar: ['filter', 'exports','print'],
						title: '我的目标',
						cellMinWidth: 90 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
							,
						cols: [
							[{
									title: '序号',
									type: "numbers",
								},
								{
									field: 't_id',
									title: 'id',
									fixed: 'left',
									hide: true
								}, {
									title: '目标日期',
									templet: function(result) {

										return result.t_begin_date + "-" + result.t_end_date;
									}
								}, {
									field: 't_status',
									title: '目标状态'
								},
								{
									field: 't_describe',
									title: '目标描述'
								},
								{
									field: 't_creat_date',
									title: '创建时间'
								},
								{
									field: 't_creator',
									title: '创建人'
								}, {
									fixed: 'right',
									title: '操作',
									toolbar: '#barDemo',

								}
							]
						],
					});


					//监听行工具事件
					table.on('tool(test)', function(obj) {
						var data2 = obj.data;
						if (obj.event === 'del') {
							layer.confirm('真的完成了吗？', function (index) {
								$.post("/target/delTarget", {"uid": data.u_id, "t_id": data2.t_id}, function (res) {
									if (res == "success") {
										layer.msg('任务完成', {icon:6});
										obj.del();
										layer.close(index);
										picture();
									}
								});
							});
						}
					});
					
					
					table.on('toolbar(test)', function(obj) {
						if(obj.event == 'add'){
							layer.open({
								type:2,
								title:'创建目标',
								shadeClose:true,
								shade:0.8,
								area:['700px','500px'],
								shadeClose:false,
								content:'creat_target.html?uid='+data.u_id,
								end: function(){
								  window.parent.location.reload(); //刷新父页面
								}
							})
						}
					})

					picture();
				});
				    } else {
				        alert("未登录，请先登录")
				        location.href = "../login/login.html"
				    }
				})


			})
		</script>


		<script src="../../js/echarts.min.js"></script>
		<script type="text/javascript">
			function picture() {
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('main'));

				// 指定图表的配置项和数据
				var option = {
					color: ['#3398DB'],
					tooltip: {
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						// boundaryGap: false,
						data: ['总目标', '未完成', '已完成', '已逾期'],
						axisTick: {
							alignWithLabel: true
						}
					}],
					yAxis: {},
					series: [{
						// name: '直接访问',
						type: 'bar',
						barWidth: '60%',
						data: ""
					}]
				};


				var temperature = [];
				$.ajax({
					type: "post",
					url: "/target/getCount",
					data: {},
					dataType: "json",
					success: function (result) {
						//请求成功时执行该函数内容，result即为服务器返回的json对象
						if (result != null) {
							temperature.push(result.allCount);
							temperature.push(result.unfinishCount);
							temperature.push(result.finishCount);
							temperature.push(result.overdueCount);

							var percent = (result.finishCount / result.allCount).toFixed(2) * 100;

							$("#finishPercent").text(percent + "%");

							getPercent(percent)

							myChart.setOption({
								series: [{
									name: '计数',
									type: 'bar',
									data: temperature
								}]
							})
						}
					}

				});

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);


				function getPercent(percent) {
					//获取百分比值
					var num = percent;

					//通过计时器来显示过渡的百分比进度
					var temp = 0;
					var timer = setInterval(function () {
						calculate(temp);
						//清除计时器结束该方法调用
						if (temp == num) {
							clearInterval(timer);
						}
						temp++;
					}, 20)

				}

				//改变页面显示百分比
				function calculate(value) {
					//改变页面显示的值
					$('.text').html(value + '%');

					//清除上次调用该方法残留的效果
					$('.circle-left').remove();
					$('.mask-right').remove();

					//当百分比小于等于50
					if (value <= 50) {
						var html = '';

						html += '<div class="mask-right" style="transform:rotate(' + (value * 3.6) + 'deg)"></div>';

						//元素里添加子元素
						$('.circle-right').append(html);
					} else {
						value -= 50;
						var html = '';

						html += '<div class="circle-left">';
						html += '<div class="mask-left" style="transform:rotate(' + (value * 3.6) + 'deg)"></div>';
						html += '</div>';

						//元素后添加元素
						$('.circle-right').after(html);
					}
				}
			}
		</script>



	</body>
</html>
